<template>
  <div>
    <div class="fill">
    </div>
        <img src="../../assets/logo.png" alt="" class="logo">
    <el-container>
      <el-aside width="200px" class="el-aside">
        <el-menu default-active="2" class="el-menu-vertical-demo"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

          <el-menu-item index="2">
            <span slot="title" @click="displayCor">课程管理</span>
          </el-menu-item>

          <el-menu-item index="3">
            <span slot="title" @click="stuManage">学生管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title" @click="tecManage">教师管理</span>
          </el-menu-item>
        </el-menu>

      </el-aside>


      <el-container>
        <el-header class="el-header">
          <el-menu mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="0" @click="displayEchart" >首页</el-menu-item>
            <el-submenu index="2">
              <template slot="title">审批管理</template>
              <el-menu-item index="2-1" @click="approveSelectCor">选课申请</el-menu-item>
              <el-menu-item index="2-3" @click="approveTecCor">课程申请</el-menu-item>
            </el-submenu>

              <el-badge :value=this.badgeRead class="item">
                <el-menu-item index="3" @click="mesCenter">消息中心</el-menu-item>
              </el-badge>

            <div>
              <div class="avatar">
                <el-avatar :size="40" :src="circleUrl"></el-avatar>
              </div>
              <div class="user">
                <el-link type="success" @click="login">{{this.form.name}}</el-link>
              </div>
            </div>
          </el-menu>
        </el-header>
        <el-main class="el-main">
              <router-view/>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        username:'',
        name:'',
        status:'',
        respTime:'',
        badgeRead:0,

        dialogTableVisible: false,
        dialogFormVisible: false,
        socket:"",
        respMes:[],
        i:0,
        form: {
          name: '管理员',
          mes:'',
          repsMes:'',
          id:'',
        },
        sendMesInfo:{
          user:'',
          receive:'',
          info:'',
        },
        timeMes:{
          time:'',
          mes:''
        },
        formLabelWidth: '120px'
      }
    },
    mounted(){
      this.username=this.$route.query.username
      this.checkMes()
    },
    methods: {
      checkMes(){
         let _this = this
         this.$axios({
            method:"GET",
            url:"http://localhost/user_admin/checkMes/admin",
         }).then(response => {
            let Mes = response.data
            for(let i of Mes){
               _this.badgeRead++
            }
         })
      },
      displayEchart(){
        this.$router.push("/displayEchart")
      },

      approveTecCor(){
        this.$router.push("/approveTecCor")
      },

      displayCor(){
        this.$router.push("/displayCor")
      },

      approveSelectCor(){
        this.$router.push("/approveSelectCor")
      },

      open: function () {
      },
      error: function () {
        console.log("连接错误")
      },
      getMessage: function (event) {
        this.timeMes.time=this.getTime()
        this.timeMes.mes=event.data;
        this.respMes.push(this.timeMes)

        // this.respTime=this.getTime();
      },
      send: function () {
        if(this.form.mes!==null)
        {
          this.socket.send(this.form.mes)
          this.timeMes.time=this.get();
          this.timeMes.mes=this.form.mes;
          this.form.mes='';
          this.respMes.push(this.timeMes)
        }



      },

      close: function () {
        this.socket.close()
        this.dialogFormVisible = false
      },


      mesCenter() {


        this.$router.push("/mesCenter")
      },


      stuManage() {
        this.$router.push("/displayStu")
      },

      chatAdmin() {
        this.dialogFormVisible = true
        if (typeof (WebSocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          // 实例化socket
          this.socket = new WebSocket("ws://localhost:80/chat/" + this.username + "/admin")
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
        }
      },

      login() {
        this.$confirm('是否要退出登陆', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/")
          this.$message({
            type: 'success',
            message: '已退出!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },

      tecManage() {
        this.$router.push("/displayTec")
      },


      getTime() {
        let date = new Date();
        let seperator1 = "-";
        let seperator2 = ":";
        //以下代码依次是获取当前时间的年月日时分秒
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        let minute = date.getMinutes();
        let hour = date.getHours();
        let second = date.getSeconds();
        //固定时间格式
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (minute >= 0 && minute <= 9) {
          minute = "0" + minute;
        }
        if (second >= 0 && second <= 9) {
          second = "0" + second;
        }
        return year + seperator1 + month + seperator1 + strDate
          + " " + hour + seperator2 + minute + seperator2 + second;
      }
    }
  }

</script>
<style scoped>

.fill{
  width: 200px;
  height: 100px;
  position: absolute;
  top:8px;
  left:8px;
  background-color: #545c64;
}

.useless{
  width: 200px;
  height: 70px;
  position:absolute;
  top:8px;
  left:7px;
  background-color: rgb(84, 92, 100);
}

.logo{
  position: absolute;
  width: 50px;
  left:85px;
  top:16px;
  z-index:1000;
  }
  .avatar {
    position: absolute;
    right: 100px;
    top: 10px;
  }

  .user{
    position: absolute;
    right: 40px;
    top: 20px;
  }

  .el-header {
    margin-left: -1px;
    padding: 0px;
    z-index: 100;
    width: 100%;
  }

  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    position: relative;
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 100px;
    margin-top:60px;
  }

  .el-main {
    padding: 0;
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    height: 600px;
    overflow-y: auto;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .login{
    position: relative;
    top: -35px;
    right: -50px;
    text-decoration-color: #42b983;
  }



.dialog-footer{
  position: relative;
  height: 120px;
  width: 100%;
  left:0;
  background-color: white;
}
.textArea{
  position: relative;
  left: 1.5%;
  width: 200px;
  height: 120px;
}
.submit{
  position: relative;
  top: -40px;
  left: -25px;
}
.content{
  position: relative;
  border-style:solid;
  border-width:1px;
  height: 300px;
  border-color: black;
  overflow-y:scroll ;
}

.he{
  font-size: 15px;
  position: absolute;
  left: 0
}
.me{
  font-size: 15px;
  position: absolute;
  right:0;
}
.time{
  font-size: 10px;
}

.item{
  position: relative;
  left: -520px;
  top: 3px;
}

.mesCenter{

}

</style>
